<template>
<div class="emergency">
    <el-card v-for="item in phones" class="phone_card hvr-grow">
      <template #header>
        <div class="card-header">
          <span>{{item.title}}</span>
          <i :class="item.icon"/>
        </div>
      </template>
      <div class="card-content">
        <div v-for="obj in item.type" class="number_contain">
            <el-tag type="plain" style="font-size: 20px;">{{obj.name}}</el-tag>
          <el-divider></el-divider>
            <span style="font-size: 20px;">{{obj.number}}</span>
        </div>
      </div>
    </el-card>

</div>
</template>

<script>
export default {
  name: "Index",
  data(){
    return{
      phones:[
        {
          title:'紧急电话',
          icon:'fa fa-ambulance fa-lg',
          type:[
            {
              name: '消防',
              number: '123'
            },
            {
              name: '急救',
              number: '123'
            },
            {
              name: '警察',
              number: '123'
            },
          ]
        },
        {
          title:'生活电话',
          icon:'fa fa-phone fa-lg',
          type: [
            {
              name: '生活超市',
              number: '123'
            },
            {
              name: '麦当基',
              number: '123'
            },
            {
              name: '肯德劳',
              number: '123'
            }
          ]
        },
        {
          title:'服务热线',
          icon:'fa fa-info-circle fa-lg',
          type: [
            {
              name: '医院客服',
              number: '123'
            },
            {
              name: '医疗后勤',
              number: '123'
            },
            {
              name: '医疗安保',
              number: '123'
            }
          ]
        },
        {
          title:'其他',
          icon:'fa fa-handshake-o fa-lg',
          type: [
            {
              name: '当班室',
              number: '123'
            },
            {
              name: '海钰旅馆',
              number: '123'
            }
          ]
        }
      ]
    }
  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
}
</script>

<style scoped>

.number_contain{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 20px 0 20px 0;
  padding: 5px 0 5px 0;
}
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.phone_card{
  width: 600px;
  height: 350px;
}
.emergency{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  height: 800px;

}
</style>